﻿<tabset stop-input-propagation justified="true">
    <tab heading="按钮">
        <div class="button_console">
            <div class="modify_area tel_title clearfix">
                <a ng-repeat="button in buttons track by $index" class="btnsetting-btndemo btndemo{{$index+1}}"
                   ng-class="{spanborder: $index == btnIndex}" ng-click="chooseTelButton(button, $index, $event)">
                </a>
            </div>
            <div class="divider" style="margin: 10px; height: 1px; background: #ccc;">
            </div>
            <div ng-if="elementType.toString().charAt(0)=='6'">
                <div class="container-fluid">
                    <div class="row">
                        <p class="col-xs-12">
                            <label>
                                提交以后的提示语
                            </label>
                            <input type="text" style="width:100%" ng-model="btnStyle.afterSubmitMsg"
                                   placeholder="提交成功" />
                        </p>
                    </div>
                </div>
            </div>
            <div ng-show="elementType.toString().charAt(0)!='6'">
                <div class="container-fluid">
                    <div class="row">
                        <label class="col-xs-4 btnsetting-label">
                            链接类型
                        </label>
                        <div class="col-xs-8">
                            <select class="btnsetting-input" ng-model="elementLinkType" ng-options="linkType.label for linkType in linkTypes"
                                    ng-change="changeLinkType(elementLinkType)"></select>
                        </div>
                    </div>
                    <div class="row" ng-show="elementLinkType.value=='link'">
                        <div class="col-xs-12">
                            <input class="btnsetting-input" type="text" ng-model="elementProperties.url">
                        </div>
                    </div>
                    <div class="row" ng-show="elementLinkType.value=='tel'">
                        <div class="col-xs-12">
                            <input class="btnsetting-input" type="tel" ng-model="elementProperties.number"
                                   placeholder="请输入您的手机/电话" ng-blur="validatePhoneNumber()">
                        </div>
                    </div>
                    <div class="row" ng-show="elementLinkType.value=='page'">
                        <div class="col-xs-12">
                            <select class="btnsetting-input" ng-model="elementProperties.url" ng-options="page.id as page.name for page in pageList"></select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="divider" style="margin: 10px; height: 1px; background: #ccc;">
            </div>
            <div class="modify_area modify-area-btn">
                <div class="container-fluid">
                    <div class="row">
                        <label class="col-xs-4 btnsetting-label" for="btnStyleTitle">
                            按钮文字
                        </label>
                        <div class="col-xs-8">
                            <input id="btnStyleTitle" class="btnsetting-input" type="text" ng-model="elementProperties.title">
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-xs-4 btnsetting-label" for="btnStyleFontSize">
                            字体
                        </label>
                        <div class="col-xs-8">
                            <select id="btnStyleFontSize" class="btnsetting-input" ng-model="btnStyle.css.fontSize"
                                    ng-options="fontSize for fontSize in fontSizes" ng-change="confirm()"></select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-4 hint--top hint--round" data-hint="点击选择按钮背景">
                            <div class="icon-btn" ng-click="changeIconImg()">
                                <img ng-src="{{btnStyle.backgroundImage?PREFIX_FILE_HOST+btnStyle.backgroundImage:''}}"
                                     ng-show="btnStyle.iconPosition!='none'" />
                                <span ng-show="btnStyle.iconPosition=='none'" class="select-tip">
                                    按钮
                                    <br>
                                    背景
                                </span>
                            </div>
                        </div>
                        <div class="col-xs-8">
                            <select style="width:50%; float:left" ng-model="btnStyle.iconPosition"
                                    class="btnsetting-input" ng-change="confirm()">
                                <option value="none">
                                    无
                                </option>
                                <option value="center">
                                    居中
                                </option>
                                <option value="left">
                                    居左
                                </option>
                                <option value="right">
                                    居右
                                </option>
                                <option value="repeat">
                                    平铺
                                </option>
                                <option value="cover">
                                    拉伸
                                </option>
                            </select>
                            <input type="checkbox" id="cancel_bg" ng-model="model.backgroundColor"
                                   ng-change="cancelBg(model.backgroundColor)" style="margin-top:0;margin-left:5px;"
                                   class="ng-pristine ng-valid" checked="checked">
                            <label style="display:inline" for="cancel_bg">
                                取消背景色
                            </label>
                            <button class="btn btn-block icon-btn-change" ng-click="changeIconImg()">
                                更换背景
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </tab>
    <tab select="changeTab('style')" heading="样式">
        <div id="comp_setting">
            <div class="style_content" ng-include="'scene/console/style.tpl.html'">
            </div>
        </div>
    </tab>
    <tab select="changeTab('anim')" heading="动画">
        <div id="comp_setting">
            <div class="style_content" ng-include="'scene/console/anim.tpl.html'">
            </div>
        </div>
    </tab>
</tabset>